import 'package:flutter/material.dart';
import 'package:mc_card/common/config.dart';
import 'package:mc_card/model/shequ/article_item_model.dart';
import 'package:mc_card/widget/webview.dart';

List<ArticleItemModel> articleList;
var parentContext;

///Feed流 Item 布局
Widget FeedItemNav(List<ArticleItemModel> items, BuildContext pContext) {
  articleList = items;
  parentContext = pContext;
  return ListView.builder(
      shrinkWrap: true,
      primary: false,
      itemCount: articleList.length,
      itemBuilder: (BuildContext context, int index) {
        return Column(
          children: <Widget>[
            // 顶部分割线 这边简单处理
            Container(
              height: 10,
              color: Color(0xFFF4F4F4),
            ),
            // 用户信息、关注、更多
            itemTop(index),
            // 图片、文字
            itemContent(index),
            // 底部菜单栏
            itemBottom(index)
          ],
        );
      });
}

Widget itemTop(int index) {
  return Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[
    // 圆形头像
    _circleAvatar(index),
    // 昵称、时间
    _craftName(index),
    // 关注
    _menu(),
  ]);
}

Row _menu() {
  return Row(
    mainAxisAlignment: MainAxisAlignment.end,
    children: <Widget>[
      Text(
        "关注",
        style: TextStyle(color: Color(0xFF333333), fontSize: 14, fontWeight: FontWeight.bold),
      ),
      Container(
        width: 35,
        height: 35,
        margin: EdgeInsets.fromLTRB(5, 0, 10, 0),
        padding: EdgeInsets.all(8),
        child: Image.asset("images/icon_shequ_article_more.png", fit: BoxFit.contain),
      )
    ],
  );
}

Expanded _craftName(int index) {
  return Expanded(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(
          articleList[index].username,
          style: TextStyle(fontSize: 15, color: Color(0xFF333333)),
        ),
        Text(
          "3小时前",
          style: TextStyle(fontSize: 13, color: Color(0xFF999999)),
        ),
      ],
    ),
  );
}

/// 中间内容 图片+文字
Widget itemContent(int index) {
  return GestureDetector(
    onTap: () {
      Navigator.push(parentContext, MaterialPageRoute(builder: (context) {
        ArticleItemModel itemModel = articleList[index];
        return WebView(
          url: itemModel.shareUrl,
          title: itemModel.title,
          hideAppBar: false,
        );
      }));
    },
    child: Container(
      margin: EdgeInsets.fromLTRB(15, 0, 15, 0),
      child: Column(
        children: <Widget>[
          // 图片
          Container(
            width: getPicWH(index, 1),
            height: getPicWH(index, 2),
            child: Image.network(
              Config.getImageUrl(articleList[index].cover[0].mediaUrl),
              fit: BoxFit.cover,
            ),
          ),
          // 文字
          Container(
            margin: articleList[index].desc.length == 0 ? EdgeInsets.all(0) : EdgeInsets.only(top: 10),
            alignment: Alignment.topLeft,
            child: Text(
              articleList[index].desc,
              style: TextStyle(color: Color(0xFF333333), fontSize: 14),
            ),
          )
        ],
      ),
    ),
  );
}

getPicWH(int index, int type) {
  var width = articleList[index].cover[0].width;
  var height = articleList[index].cover[0].height;

  if (width <= 0 || height <= 0) {
    width = 100;
    height = 100;
  }
  // 获取屏幕的大小
  Size size = MediaQuery.of(parentContext).size;
  var w = size.width - 30;

  double h = w * height / width;
  // 计算宽度
  if (type == 1) {
    return w;
  } else {
    // 计算高度
    return h > w ? w : h;
  }
}

Widget itemBottom(int index) {
  return Container(
    margin: EdgeInsets.fromLTRB(15, 10, 15, 20),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        // 点赞
        Container(
          alignment: Alignment.centerLeft,
          child: Row(
            children: <Widget>[
              Image.asset(
                "images/icon_like_no.png",
                width: 20,
                height: 20,
              ),
              Text(
                articleList[index].likecnt == 0 ? "点赞" : " ${articleList[index].likecnt}",
                style: TextStyle(color: Color(0xFF999999), fontSize: 13),
              )
            ],
          ),
        ),
        // 留言
        Container(
          alignment: Alignment.centerLeft,
          child: Row(
            children: <Widget>[
              Image.asset(
                "images/icon_leave.png",
                width: 20,
                height: 20,
              ),
              Text(
                articleList[index].rnt == 0 ? "留言" : " ${articleList[index].rnt}",
                style: TextStyle(color: Color(0xFF999999), fontSize: 13),
              )
            ],
          ),
        ),
        // 分享
        Container(
          alignment: Alignment.centerLeft,
          child: Row(children: <Widget>[
            Image.asset(
              "images/icon_share_gary.png",
              width: 20,
              height: 20,
            ),
            Text(
              "分享",
              style: TextStyle(color: Color(0xFF999999), fontSize: 13),
            )
          ]),
        ),
      ],
    ),
  );
}

/// 圆形头像
Container _circleAvatar(int index) {
  return new Container(
    width: 45.0,
    height: 45.0,
    margin: EdgeInsets.fromLTRB(15, 15, 10, 15),
    decoration: BoxDecoration(
      shape: BoxShape.circle,
      image: DecorationImage(
        image: NetworkImage(
          Config.getImageUrl(articleList[index].avatar),
        ),
      ),
    ),
  );
}
